<!--
 * @Author: HeAo
 * @Date: 2021-10-25 09:57:08
 * @LastEditTime: 2021-10-25 10:34:01
 * @LastEditors: HeAo
 * @Description: 订单详情页
 * @FilePath: \ej-webui\src\views\order\details.vue
 * 别乱动！
-->
<template>
  <div class="orderDetail">
    <div class="btns">
      <el-button type="text" @click="$router.go(-1)">返回</el-button>
    </div>
    <!-- 表格区域 -->
    <el-table :data="order.orderLines" style="width: 100%">
      <el-table-column prop="id" label="订单项编号"></el-table-column>
      <el-table-column prop="productId" label="产品编号"></el-table-column>
      <el-table-column prop="product.name" label="产品名称"></el-table-column>
      <el-table-column label="产品图片">
        <template v-slot="{ row }">
          <img :src="row.product.photo" alt="找不到" height="50px" />
        </template>
      </el-table-column>
      <el-table-column prop="product.price" label="产品单价"></el-table-column>
      <el-table-column prop="number" label="下单数量"></el-table-column>
    </el-table>
    <!-- 卡片区域 -->
    <el-row :gutter="20" style="margin-top: 1em">
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>订单基本信息</span>
          </div>
          <div class="cradMain">
            <div>订单编号：{{ order.id }}</div>
            <div>订单金额：{{ order.total }}</div>
            <div>下单时间：{{ order.orderTime | fmtDateTime }}</div>
            <div>订单状态：{{ order.status }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>下单者信息</span>
          </div>
          <div class="cradMain">
            <div>下单用户：{{ order.customer.username }}</div>
            <div>手机号：{{ order.customer.telephone }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>雇主信息</span>
          </div>
          <div class="cradMain">
            <div>姓名：{{ order.address.username }}</div>
            <div>手机号：{{ order.address.telephone }}</div>
            <div>
              服务地址：{{
                order.address.province +
                order.address.city +
                order.address.area +
                order.address.address
              }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      order: {},
    };
  },
  methods: {
    // 查询订单详细信息
    findOrderById(id) {
      request
        .get("/order/findById", {
          params: {
            id,
          },
        })
        .then((res) => {
          this.order = res.data;
        });
    },
  },
  created() {
    // 将路由跳转携带的参数，作为异步请求的实参进行传递
    this.findOrderById(this.$route.query.id);
  },
};
</script>
